<template>
  <view class="withdraw-page">
    <header-vue :back="true" :title="title" bgColor="transparent"></header-vue>
    <view class="background-gradient">
      <image
        :src="IMAGE_URL+'/static/master/qianbao.png'"
        style="width: 100%; height: 640rpx"
      />
    </view>
    <view class="withdraw-content">
      <!-- 可提现金额 -->
      <view class="balance-section">
        <view class="balance-title">可提现金额(元)</view>
        <view class="balance-amount">
          <text class="amount-symbol">￥</text>
          {{ withdrawData.balance }}
        </view>
      </view>

      <!-- 提现金额输入 -->
      <view class="amount-input-section">
        <view class="section-title" style="margin-bottom: 40rpx">提现金额</view>
        <view class="input-wrapper">
          <text class="currency-symbol">￥</text>
          <input
            v-model="withdrawAmount"
            type="number"
            placeholder="请输入提现金额"
            class="amount-input"
            @input="handleAmountInput"
          />
        </view>
      </view>

      <!-- 提现方式 -->
      <view class="withdraw-method-section">
        <view class="section-title">
          <text>提现方式</text>

          <view @click="onSkzhClick" class="skzh">
            <text>收款账户</text>

            <i class="iconfont icon-jiantou font28"></i>
          </view>
        </view>
        <view class="method-list">
          <view
            v-for="method in withdrawMethods"
            :key="method.id"
            class="method-item"
            @click="selectMethod(method.id)"
          >
            <view class="method-left">
              <image
                :src="IMAGE_URL+method.icon"
                class="method-icon"
                mode="aspectFit"
              ></image>
              <view class="method-info">
                <text class="method-name">{{ method.name }}</text>
              </view>
            </view>
            <view class="method-right">
              <u-checkbox
                v-model="method.checked"
                :name="method.id"
                activeColor="#1890ff"
                @change="onMethodChange(method.id)"
              ></u-checkbox>
            </view>
          </view>
        </view>
      </view>

      <!-- 立即提现按钮 -->
      <view class="withdraw-btn-section">
        <button class="withdraw-btn" @click="handleWithdraw">立即提现</button>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from "@/config/app.js";
    //  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      title: "提现",
      withdrawAmount: "",
      selectedMethod: "wechat",
      withdrawData: {
        balance: "250.00",
      },
      withdrawMethods: [
        {
          id: "wechat",
          name: "微信",
          icon: "/static/master/wx.png",
          desc: "微信支付",
          checked: true,
        },
        {
          id: "alipay",
          name: "支付宝",
          icon: "/static/master/zfb.png",
          desc: "支付宝",
          checked: false,
        },
        {
          id: "bank",
          name: "银行卡",
          icon: "/static/master/yhk.png",
          desc: "银行转账",
          checked: false,
        },
      ],
    };
  },
  components: {
    headerVue,
  },
  computed: {
    canWithdraw() {
      return (
        this.withdrawAmount &&
        parseFloat(this.withdrawAmount) > 0 &&
        parseFloat(this.withdrawAmount) <=
          parseFloat(this.withdrawData.balance) &&
        this.selectedMethod
      );
    },
  },
  mounted() {
    // 初始化选中第一个方式
    this.selectedMethod = this.withdrawMethods[0].id;
  },
  methods: {
    onSkzhClick() {
      uni.navigateTo({
        url: "/views-master/my/receipt-account",
      });
    },
    // 处理金额输入
    handleAmountInput() {
      if (
        this.withdrawAmount &&
        parseFloat(this.withdrawAmount) > parseFloat(this.withdrawData.balance)
      ) {
        this.withdrawAmount = this.withdrawData.balance;
      }
    },

    // 全部提现
    withdrawAll() {
      this.withdrawAmount = this.withdrawData.balance;
    },

    // 选择提现方式
    selectMethod(methodId) {
      this.selectedMethod = methodId;
      // 更新复选框状态
      this.withdrawMethods.forEach((method) => {
        method.checked = method.id === methodId;
      });
    },

    // 提现方式变更
    onMethodChange(methodId) {
      if (this.withdrawMethods.find((m) => m.id === methodId)?.checked) {
        this.selectedMethod = methodId;
        // 取消其他选项
        this.withdrawMethods.forEach((method) => {
          if (method.id !== methodId) {
            method.checked = false;
          }
        });
      }
    },

    // 处理提现
    handleWithdraw() {
      // if (!this.canWithdraw) return;
      // uni.showLoading({ title: "处理中..." });
      // // 模拟提现请求
      // setTimeout(() => {
      //   uni.hideLoading();
      //   uni.showModal({
      //     title: "提现申请",
      //     content: `确定要提现￥${
      //       this.withdrawAmount
      //     }到${this.getMethodName()}吗？`,
      //     success: (res) => {
      //       if (res.confirm) {
      //         // 这里调用提现API
      //         this.withdrawData.balance = (
      //           parseFloat(this.withdrawData.balance) -
      //           parseFloat(this.withdrawAmount)
      //         ).toFixed(2);
      //         uni.showToast({
      //           title: "提现申请已提交",
      //           icon: "success",
      //           duration: 2000,
      //         });
      //         // 清空输入框
      //         this.withdrawAmount = "";
      //         // 返回上一页
      //         setTimeout(() => {
      //           uni.navigateBack();
      //         }, 1500);
      //       }
      //     },
      //   });
      // }, 1000);
      // uni.navigateTo({
      //   url: "/views-master/my/withdraw",
      // })
    },

    // 获取提现方式名称
    getMethodName() {
      const method = this.withdrawMethods.find(
        (m) => m.id === this.selectedMethod
      );
      return method ? method.name : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.withdraw-page {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #f7f7f7;
  .background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 0;
  }
  .withdraw-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    padding: 40rpx 32rpx 32rpx;
    z-index: 1;
  }

  .balance-section {
    padding: 40rpx 30rpx;
    margin-bottom: 30rpx;
  }

  .balance-title {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }

  .balance-amount {
    font-weight: bold;

    font-size: 68rpx;
    color: #333333;
  }

  .amount-symbol {
    font-size: 48rpx;
  }

  .amount-input-section {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  }

  .section-title {
    font-size: 30rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    .skzh {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .input-wrapper {
    display: flex;
    align-items: center;
  }

  .currency-symbol {
    font-size: 40rpx;
    color: #333;
    font-weight: 500;
    margin-right: 10rpx;
  }

  .amount-input {
    flex: 1;
    font-size: 36rpx;
    color: #333;
    height: 60rpx;
    line-height: 60rpx;

    &::placeholder {
      font-size: 30rpx;
      color: #999999;
    }
    ::v-deep .input-placeholder {
      font-size: 30rpx;
      color: #999999;
    }
  }

  .amount-tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tip-text {
    font-size: 26rpx;
    color: #1890ff;
  }

  .available-amount {
    font-size: 24rpx;
    color: #999;
  }

  .withdraw-method-section {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  }

  .method-list {
    margin-top: 20rpx;
  }

  .method-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    &.active {
      background: #f8f9fa;
      margin: 0 -30rpx;
      padding: 30rpx;
    }
  }

  .method-left {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .method-icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
  }

  .method-info {
    display: flex;
    flex-direction: column;
  }

  .method-name {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 5rpx;
  }

  .method-desc {
    font-size: 24rpx;
    color: #999;
  }

  .method-right {
    margin-left: 20rpx;
  }

  .account-section {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  }

  .account-info {
    background: #f8f9fa;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-top: 10rpx;
  }

  .account-number {
    font-size: 28rpx;
    color: #333;
  }

  .withdraw-btn-section {
    padding: 0 30rpx;
  }

  .withdraw-btn {
    width: 630rpx;
    height: 76rpx;
    background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    line-height: 76rpx;
    border: none;

    font-size: 36rpx;
    color: #ffffff;

    &::after {
      border: none;
    }
  }
}
</style>
